<template>
  <div class="app-container">
    <div class="dashboard-container">
      <!-- 用户信息卡片 -->
      <div class="user-info-section" v-if="userInfo">
        <div class="user-profile">
          <el-avatar :size="100" :src="userInfo.avatar" class="user-avatar"/>
          <div class="user-info">
            <div class="user-name">{{ userInfo.userName }}</div>
            <div class="user-contact">
              <span><i class="el-icon-message"></i> {{ userInfo.email }}</span>
              <span><i class="el-icon-mobile-phone"></i> {{ userInfo.phoneNumber }}</span>
            </div>
          </div>
        </div>
        <el-button type="primary" icon="el-icon-refresh" circle @click="refreshPoints" class="refresh-btn"></el-button>
      </div>

      <!-- 积分统计卡片 -->
      <div class="stats-grid">
        <div class="stat-card subscription">
          <i class="el-icon-reading card-icon"></i>
          <div class="stat-info">
            <div class="stat-value">{{ pointsData.tipping || 0 }}</div>
            <div class="stat-label">订阅积分</div>
          </div>
        </div>
        
        <div class="stat-card tickets">
          <i class="el-icon-ticket card-icon"></i>
          <div class="stat-info">
            <div class="stat-value">{{ pointsData.pass || 0 }}</div>
            <div class="stat-label">月票数量</div>
          </div>
        </div>
        
        <div class="stat-card points">
          <i class="el-icon-medal card-icon"></i>
          <div class="stat-info">
            <div class="stat-value">{{ pointsData.passPoints || 0 }}</div>
            <div class="stat-label">月票积分</div>
          </div>
        </div>
        
        <div class="stat-card total">
          <i class="el-icon-coin card-icon"></i>
          <div class="stat-info">
            <div class="stat-value">{{ pointsData.totalPoints || 0 }}</div>
            <div class="stat-label">总积分</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getPointsByUserId } from '@/api/points/points'
import { calculatePoints } from '@/api/writer/writer'
import store from "@/store";

export default {
  name: 'WriterPoints',
  data() {
    return {
      userId: store.state.user.id,
      pointsData: {
        tipping: 0,
        pass: 0,
        passPoints: 0,
        totalPoints: 0
      },
      userInfo: null
    }
  },
  created() {
    this.getPoints()
  },
  methods: {
    async getPoints() {
      try {
        const pointsResponse = await getPointsByUserId(this.userId)
        const writerPointsResponse = await calculatePoints(this.userId)
        
        if (pointsResponse.code === 200 && writerPointsResponse.code === 200) {
          this.pointsData = {
            tipping: writerPointsResponse.data.tipping || 0,
            pass: writerPointsResponse.data.pass || 0,
            passPoints: writerPointsResponse.data.passPoints || 0,
            totalPoints: writerPointsResponse.data.totalPoints || 0
          }
          
          this.userInfo = {
            userName: pointsResponse.data.userName,
            avatar: pointsResponse.data.avatar,
            email: pointsResponse.data.email,
            phoneNumber: pointsResponse.data.phoneNumber
          }
        } else {
          this.$message.error(pointsResponse.msg || writerPointsResponse.msg || '获取积分信息失败')
        }
      } catch (error) {
        console.error('获取积分信息失败:', error)
        this.$message.error('获取积分信息失败')
      }
    },
    refreshPoints() {
      this.getPoints()
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  height: 100%;
  padding: 0;
  background: #f6f8fb;
}

.dashboard-container {
  height: 100%;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.user-info-section {
  background: #fff;
  border-radius: 16px;
  padding: 32px 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);

  .user-profile {
    display: flex;
    align-items: center;
    gap: 30px;

    .user-avatar {
      border: 4px solid #fff;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      transition: transform 0.3s;

      &:hover {
        transform: scale(1.05);
      }
    }

    .user-info {
      .user-name {
        font-size: 24px;
        font-weight: 600;
        color: #2c3e50;
        margin-bottom: 12px;
      }

      .user-contact {
        display: flex;
        gap: 32px;
        color: #606266;
        font-size: 16px;

        span {
          display: flex;
          align-items: center;
          gap: 8px;

          i {
            font-size: 20px;
            color: #409EFF;
          }
        }
      }
    }
  }

  .refresh-btn {
    width: 48px;
    height: 48px;
    opacity: 0.8;
    transition: all 0.3s;

    &:hover {
      opacity: 1;
      transform: rotate(180deg);
    }
  }
}

.stats-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  min-height: 240px;

  .stat-card {
    background: #fff;
    border-radius: 16px;
    padding: 32px;
    display: flex;
    align-items: center;
    transition: all 0.3s;
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);

    &:hover {
      transform: translateY(-5px);
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);

      .card-icon {
        transform: scale(1.1) rotate(10deg);
      }
    }

    .card-icon {
      font-size: 48px;
      margin-right: 24px;
      transition: all 0.3s;
    }

    .stat-info {
      .stat-value {
        font-size: 36px;
        font-weight: 600;
        margin-bottom: 8px;
        line-height: 1.2;
      }

      .stat-label {
        font-size: 16px;
      }
    }

    &.subscription {
      background: linear-gradient(135deg, #3498db, #2980b9);
      color: white;
      .stat-label { color: rgba(255, 255, 255, 0.9); }
    }

    &.tickets {
      background: linear-gradient(135deg, #e74c3c, #c0392b);
      color: white;
      .stat-label { color: rgba(255, 255, 255, 0.9); }
    }

    &.points {
      background: linear-gradient(135deg, #2ecc71, #27ae60);
      color: white;
      .stat-label { color: rgba(255, 255, 255, 0.9); }
    }

    &.total {
      background: linear-gradient(135deg, #9b59b6, #8e44ad);
      color: white;
      .stat-label { color: rgba(255, 255, 255, 0.9); }
    }
  }
}

@media screen and (max-width: 1400px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 768px) {
  .dashboard-container {
    padding: 20px;
    gap: 20px;
  }

  .user-info-section {
    padding: 24px;
    flex-direction: column;
    gap: 24px;
    text-align: center;
    
    .user-profile {
      flex-direction: column;
      gap: 20px;
      
      .user-info .user-contact {
        flex-direction: column;
        gap: 12px;
        justify-content: center;
      }
    }
  }

  .stats-grid {
    grid-template-columns: 1fr;
    gap: 20px;

    .stat-card {
      padding: 24px;

      .card-icon {
        font-size: 36px;
        margin-right: 20px;
      }

      .stat-info {
        .stat-value {
          font-size: 28px;
        }

        .stat-label {
          font-size: 14px;
        }
      }
    }
  }
}
</style>

